<template>
  <div>
    <ul>
      <template v-for="(image, index) in imageList">
        <li :key="index">
          <el-progress v-if="!image.url" :percentage="image.percent" type="circle" :width="80" :stroke-width="4" />
          <img v-if="image.url" :src="image.url" @load="imgLoad($event, index)" />
          <div v-if="image.url" class="icon-delete">
            <i class="el-icon-delete" @click.stop="rmImage(index)" />
          </div>
        </li>
      </template>

      <li @click="uploadBtn" id="image-uploader">
        <input type="file" @change="upload" multiple ref="file" style="display: none;" />
        <i class="el-icon-upload" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imageList: []
    }
  },
  computed: {},
  watch: {
    value(val) {
      if (val != null && val != '') {
        this.imageList = []
        val.split(',').forEach((url)=> {
          this.imageList.push({ url: this.$store.getters.fileUrlPrefix + url, percent: 0 })
        })
      }
    }
  },
  created() {},
  methods: {
    uploadBtn(){
      this.$refs.file.dispatchEvent(new MouseEvent('click'))
    },
    upload(e) {
      let files = e.target.files
      for (let i = 0; i < files.length; i++) {
        const isImg = files[i].type.indexOf('image') > -1
        const isLimit = files[i].size / 1024 / 1024 < 5

        if (!isImg) {
          this.$message.error('请上传图片格式!')
          return false
        }
        if (!isLimit) {
          this.$message.error('大小不能超过 5MB!')
          return false
        }
        let formData = new FormData()
        formData.append('files', files[i])

        var image = { url: null, percent: 0 }
        this.imageList.push(image)

        this.uploadAxios(formData, image)
      }
    },
    uploadAxios(formData, image){
      this.$axios({
        url: this.$store.getters.uploadUrl,
        method: 'post',
        data: formData,
        timeout: 1000 * 60, // 请求超时时间
        onUploadProgress: (progress)=> {
          image.percent = Math.round(progress.loaded / progress.total * 100)
        }
      }).then((res) => {
        if (res.code == 200) {
          image.percent = 100
          image.url = this.$store.getters.fileUrlPrefix + res.data[0].url
          //  组件返回值
          var urlList = []
          this.imageList.forEach((image)=> {
            urlList.push(image.url.split(this.$store.getters.fileUrlPrefix)[1])
          })
          var urls = urlList.toString()
          this.$emit('input', urls)
        }
      }).catch(err => {})
    },
    rmImage(index) {
      this.$refs.file.value = ''
      this.imageList.splice(index, 1)

      var urlList = []
      this.imageList.forEach((image)=> {
        urlList.push(image.url.split(this.$store.getters.fileUrlPrefix)[1])
      })
      var urls = urlList.toString()
      this.$emit('input', urls)
    },
    imgLoad(e, index) {
      var scaleW = 200/e.path[0].offsetWidth
      var scaleH = 200/e.path[0].offsetHeight

      var scale = scaleW <= scaleH ? scaleW : scaleH

      e.path[0].style.transform = 'scale(' + scale + ')'
    }
  }
}
</script>

<style lang="scss" scoped>
  #image-uploader {
    &:hover {
      border: 1px dotted #1989fa;
      .el-icon-upload {
        color: #46a6ff;
      }
    }
    .el-icon-upload {
      font-size: 48px;
      margin: 50px;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin: 5px;
      border: 1px dotted #8c939d;
      cursor: pointer;
      border-radius: 10px;
      width: 200px;
      height: 200px;
      .icon-delete {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: default;
        &:hover {
          background-color: rgba(0, 0, 0, .5);
          .el-icon-delete {
            opacity: 1;
          }
        }
        .el-icon-delete {
          font-size: 48px;
          margin: 50px;
          opacity: 0;
          cursor: pointer;
          color: #FFFFFF;
          &:hover {
            color: #46a6ff;
          }
        }
      }
    }
  }
</style>
